<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Title</title>
	<script src="lib/react.development.js"></script>
	<script src="lib/react-dom.development.js"></script>
	<script src="lib/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
</body>
<script type="text/babel">
	const root = ReactDOM.createRoot(document.querySelector("#root"));
	const boyBookList = [
		{
			id:1,
			bookName:"射雕英雄传",
			author:"金庸"
		},{
			id:2,
			bookName: "圆月弯刀",
			author: "古龙"
		}
	];
	const girlBookList = [
		{
			id:3,
			bookName:"还珠格格",
			author:"琼瑶"
		},{
			id:4,
			bookName: "情深深雨朦朦",
			author:"琼瑶"
		}
	
	];
	
	const App = ()=>(
		<>
			<BookList bookList={boyBookList}>
				<h3 style={{color:"green"}}>男生小说</h3>
			</BookList>
			<hr/>
			<BookList bookList={girlBookList}>
				<h3 style={{color:"pink"}}>女生必读</h3>
			</BookList>
		</>
	)
	const BookList = props =>{
		const {bookList} = props;
		return (
			<div>
				{props.children}
				{
					bookList.map(item=>(
						<div key={item.id}>
							<h3>{item.bookName}</h3>
							<p>作者:{item.author}</p>
						</div>
					
					))
				}
			</div>
		)
	}
	root.render(<App></App>);
</script>
</html>